<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>animation</title>
  <style>
    *{margin: 0;padding: 0;}
    #inp1,#inp2,#inp3,#inp4{
      width:341px;
      margin: -6px;
      background-repeat: no-repeat;
      border: none;
    }
    #inp1{
      height:170px;
      animation: cloud 5s;
      animation-iteration-count: 1000;
    }
    #inp2{
      height:170px;
      animation:sun 20s;
      background-position: center;
      animation-iteration-count: 1000;
    }
    #inp3{
      height:227px;
      animation: man 2s;
      animation-iteration-count: 1000;
    }
    #inp4{
      height:227px;
      animation: tree 10s;
      animation-iteration-count: 1000;
    }
    @keyframes cloud {
      0% {background-image: url(../images/yun/yunda/yun1.jpg)}
      12.5% {background-image: url(../images/yun/yunda/yun2.jpg)}
      25% {background-image: url(../images/yun/yunda/yun3.jpg)}
      37.5% {background-image: url(../images/yun/yunda/yun4.jpg)}
      50% {background-image: url(../images/yun/yunda/yun5.jpg)}
      62.5% {background-image: url(../images/yun/yunda/yun6.jpg)}
      75% {background-image: url(../images/yun/yunda/yun7.jpg)}
      87.5% {background-image: url(../images/yun/yunda/yun8.jpg)}
      100% {background-image: url(../images/yun/yunda/yun9.jpg)}
    }
    @keyframes sun {
      0% {background-image: url(../images/sun/sunda/sun1.jpg)}
      12.5% {background-image: url(../images/sun/sunda/sun2.jpg)}
      25% {background-image: url(../images/sun/sunda/sun3.jpg)}
      37.5% {background-image: url(../images/sun/sunda/sun4.jpg)}
      50% {background-image: url(../images/sun/sunda/sun5.jpg)}
      62.5% {background-image: url(../images/sun/sunda/sun6.jpg)}
      75% {background-image: url(../images/sun/sunda/sun7.jpg)}
      87.5% {background-image: url(../images/sun/sunda/sun8.jpg)}
      100% {background-image: url(../images/sun/sunda/sun9.jpg)}
    }
    @keyframes man {
      0% {background-image: url(../images/images_3/bman/run1.jpg);background-position: 0px 132px;}
      12.5% {background-image: url(../images/images_3/bman/run2.jpg);background-position: 43px 132px;}
      25% {background-image: url(../images/images_3/bman/run3.jpg);background-position: 86px 132px;}
      37.5% {background-image: url(../images/images_3/bman/run4.jpg);background-position: 129px 132px;}
      50% {background-image: url(../images/images_3/bman/run5.jpg);background-position: 172px 132px;}
      62.5% {background-image: url(../images/images_3/bman/run6.jpg);background-position: 215px 132px;}
      75% {background-image: url(../images/images_3/bman/run7.jpg);background-position: 258px 132px;}
      87.5% {background-image: url(../images/images_3/bman/run8.jpg);background-position: 301px 132px;}
      100% {background-image: url(../images/images_3/bman/run1.jpg);background-position: 344px 132px;}
    }
    @keyframes tree {
      0% {background-image: url(../images/tree_on/treeda/tree1.jpg)}
      6.25% {background-image: url(../images/tree_on/treeda/tree2.jpg)}
      12.5% {background-image: url(../images/tree_on/treeda/tree3.jpg)}
      18.75% {background-image: url(../images/tree_on/treeda/tree4.jpg)}
      25% {background-image: url(../images/tree_on/treeda/tree5.jpg)}
      31.25% {background-image: url(../images/tree_on/treeda/tree6.jpg)}
      37.75% {background-image: url(../images/tree_on/treeda/tree7.jpg)}
      43.75% {background-image: url(../images/tree_on/treeda/tree8.jpg)}
      50% {background-image: url(../images/tree_on/treeda/tree9.jpg)}
      56.25% {background-image: url(../images/tree_on/treeda/tree10.jpg)}
      62.5% {background-image: url(../images/tree_on/treeda/tree11.jpg)}
      68.75% {background-image: url(../images/tree_on/treeda/tree12.jpg)}
      75% {background-image: url(../images/tree_on/treeda/tree13.jpg)}
      81.25% {background-image: url(../images/tree_on/treeda/tree14.jpg)}
      87.5% {background-image: url(../images/tree_on/treeda/tree15.jpg)}
      93.75% {background-image: url(../images/tree_on/treeda/tree16.jpg)}
      100% {background-image: url(../images/tree_on/treeda/tree17.jpg)}
  </style>
</head>
<body>
<table>
  <tr>
    <td><input id="inp1"></td>
    <td><input id="inp2"></td>
  </tr>
  <tr>
    <td><input id="inp3"></td>
    <td><input id="inp4"></td>
  </tr>
</table>
</body>
</html>
